<!--
 * @Description: 分包选择策划表
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-02-16 09:51:40
 * @LastEditTime: 2022-03-04 17:20:12
 * @FilePath: \cscec-pms-admin\src\views\project\projectManagementPlanning\projectManagementPlanningComponents\components\SubcontractSelectionPlanning.vue
-->
<template>
  <a-card>
    <title-name title="分包选择策划表" />
    <a-table
      ref="table"
      :columns="columns"
      :data-source="data"
      :pagination="false"
      bordered
      :loading="loading"
      row-key="id"
    >
      <template
        v-for="{dataIndex} in columns"
        :slot="dataIndex"
        slot-scope="text,record,index"
      >
        <!-- 查看 -->
        <span
          v-if="info.pageType === 'detail'"
          :key="dataIndex"
        >
          {{ record[dataIndex] }}
        </span>
        <!-- 查看 -->
        <a
          v-else-if="dataIndex === 'operation'"
          :key="dataIndex"
          class="delete"
          @click="handleDelete(index)"
        >删除</a>
        <!-- 编辑/变更 -->
        <BaseInput
          v-else
          :key="dataIndex"
          v-model="record[dataIndex]"
          class="input"
          :max-length="300"
        />
        <!-- 编辑/变更 -->
      </template>
    </a-table>
    <a-button
      v-if="info.pageType !== 'detail'"
      type="primary"
      class="add"
      @click="handleAdd"
    >
      增行
    </a-button>
  </a-card>
</template>
<script>
import { subcontractSelectionPlanning } from '@/api/projectManagementPlanning/projectManagementPlanningSchedule'
export default {
  name: 'SubcontractSelectionPlanning' + Date.now(),
  components: {},
  data() {
    return {
      // 表头
      columns: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          customRender: (text, record, index) => {
            return index + 1
          }
        },
        {
          title: '分包项目',
          dataIndex: 'subProject',
          scopedSlots: { customRender: 'subProject' }
        },
        {
          title: '分包工作内容',
          dataIndex: 'subContent',
          scopedSlots: { customRender: 'subContent' }
        },
        {
          title: '分包方式',
          dataIndex: 'subWay',
          scopedSlots: { customRender: 'subWay' }
        },
        {
          title: '分包商选择方式',
          dataIndex: 'selectWay',
          scopedSlots: { customRender: 'selectWay' }
        },
        {
          title: '选择分包数量',
          dataIndex: 'subNum',
          scopedSlots: { customRender: 'subNum' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 100,
          scopedSlots: { customRender: 'operation' }
        }
      ],
      // 表数据
      data: [],
      // 必填项
      required: ['subProject', 'subContent', 'subWay', 'selectWay', 'subNum'],
      // 加载
      loading: false
    }
  },
  computed: {
    // 地址携带信息
    info() {
      return this.$route.query
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    /**
     * @description: 获取数据
     * @param {void}
     * @return {void}
     */
    async getData() {
      this.data = []
      const { id: planTaskDetailId, version } = this.info
      this.loading = true
      const { code, data } = await subcontractSelectionPlanning.queryPlanSubSelectDetail({
        latestData: version ? false : true,
        planTaskDetailId,
        version
      })
      if (code === 200 && data.length > 0) {
        // 已有数据
        this.data = data
      } else {
        // 没有数据
        this.handleAdd()
      }
      this.loading = false
    },
    /**
     * @description: 增行
     * @param {void}
     * @return {void}
     */
    handleAdd() {
      const data = {}
      this.columns.forEach((el) => {
        if (el.dataIndex) {
          if (el.dataIndex !== 'operation') {
            data[el.dataIndex] = void 0
          }
        } else {
          data.id = 'temp' + Date.now()
        }
      })
      this.data.push(data)
    },
    /**
     * @description: 删除
     * @param {number} index 数据索引
     * @return {void}
     */
    handleDelete(index) {
      const vm = this
      this.$confirm({
        title: '温馨提示',
        content: '请确认是否要删除该条数据？',
        okType: 'danger',
        onOk() {
          vm.data.splice(index, 1)
        }
      })
    },
    /**
     * @description: 表格校验
     * @param {void}
     * @return {boolean} 是否通过校验
     */
    verify() {
      return !this.data.some((el) => {
        for (let item in this.required) {
          if ((el[this.required[item]] ?? '') === '') {
            return true
          }
        }
      })
    },
    /**
     * @description: 保存草稿
     * @param {object} baseInfo 基本信息
     * @return {void}
     */
    SubcontractSelectionPlanningSaveDrafts(baseInfo) {
      this.handleSubmit(1)
    },
    /**
     * @description: 提交
     * @param {object} baseInfo 基本信息
     * @return {void}
     */
    SubcontractSelectionPlanningSubmit(baseInfo) {
      if (this.data.length > 0) {
        if (this.verify()) {
          const vm = this
          this.$confirm({
            title: '温馨提示',
            content: '请确认是否提交？',
            onOk() {
              vm.handleSubmit(2)
            }
          })
        } else {
          this.$confirm({
            title: '温馨提示',
            content: '请将数据填写完整'
          })
        }
      } else {
        this.$confirm({
          title: '温馨提示',
          content: '请至少填写一行数据'
        })
      }
    },
    /**
     * @description: 数据提交
     * @param {number} statusEnum 状态码
     * @return {void}
     */
    handleSubmit(statusEnum) {
      const { id: planTaskDetailId, version, pageType } = this.info
      subcontractSelectionPlanning
        .batchUpdatePlanSubSelect({
          changed: pageType === 'change',
          list: this.data,
          planTaskDetailId,
          statusEnum,
          version
        })
        .then(({ code }) => {
          if (code === 200) {
            this.$message.success('操作成功')
            this.getData()
            if (statusEnum === 2) {
              this.$close()
            }
          }
        })
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.add {
  margin-top: 20px;
}
@{deep}.input .ant-input {
  border-color: #e4ac0b;
  background-color: #fff9e8;
}
.delete {
  color: red;
}
@{deep} .ant-table-fixed {
  margin-left: 0;
}
</style>
